HTML+CSS 2019-02-15
準備
話すこと
目標
HTMLとCSS
スタイルを書く場所
目標
エンジニアがマークアップしているというのはどういうことか雰囲気を知る
HTMLメールやWordPressでちょっとした見た目を調整できる
EPUBの調整ができる?
一からHTMLとCSSを書けるようになる
簡単なJavaScriptまで行けたら素晴らしい
HTMLとCSSについて
それぞれの現時点でのこと
HTMLとCSS
構造と見た目の分離
HTML
タグ
入れ子(ネスト)
属性
テキスト
HTMLタグ
code:tag.html
<style>
/* CSS here */
</style>
<p>こんにちは。</p>
<body>
<h1>ページタイトル</h1>
</body>
<body><h1>ページタイトル</h1></body>
タグ名(要素名)
開始タグと終了タグ(閉じタグ)
終了タグがあるやつとないやつ
属性
属性名と値
コンテンツ
入れ子
HTML属性
code:attr.html
属性名 ... property、content
属性値 ... og:image、http://...1500w
"..."(とか)でくくる
一つのタグに複数あってよい
どんな属性があるかは、タグによる
HTMLテキスト
code:content.html
<p>こんにちは。</p>
CSS
ボックスモデル
内側
レイアウト(外側)
スタイルを書く場所
ファイル
<style>...</style>要素(インライン)
style=""属性(インライン)
CSS(インライン)
code:inline.html
<h1>ページタイトル</h1>
<h1 style="">ページタイトル</h1>
<h1 style="border: solid 1px; color: red;">ページタイトル</h1>
style属性
宣言
プロパティ ... border(使えるプロパティはタグによる)
値 ... solid 1px(書き方はプロパティによる)
プロパティと値の間の区切り ... :(コロン)
空白があってもよい
宣言と宣言の区切り ... ;(セミコロン)
ハンズオン
ハンズオン
モブプロ
ハンズオン
code:heading.html
<!document html>
<html>
<head>
<meta charset=UTF-8>
<title>宇宙兄弟35巻 限定版 タイトル</title>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div class="purchase limited" id="purchase" role="dialog" aria-modal="true" tabindex="-1">
<div class="backdrop" role="presentation"></div>
<div class="content">
<h2 tabindex="-1">
35巻限定版
</h2>
</div>
</div>
</body>
</html>
code:button.html
<!document html>
<html>
<head>
<meta charset=UTF-8>
<title>宇宙兄弟35巻 限定版 ボタン</title>
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div class="purchase limited" id="purchase" role="dialog" aria-modal="true" tabindex="-1">
<div class="backdrop" role="presentation"></div>
<div class="content">
<div>
<input type="hidden" name="goodsNo" value="030304210000">
<input name="cnt_030304210000" type="hidden" value="1">
<button>今すぐ予約する</button>
</form>
</div>
</div>
</div>
</body>
</html>
code:dialog.html
<!document html>
<html>
<head>
<meta charset=UTF-8>
<title>宇宙兄弟35巻 限定版 モーダル</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
text-align: center;
}
.close-button {
display: block;
}
</style>
</head>
<body>
<div class="purchase limited" id="purchase" role="dialog" aria-modal="true" tabindex="-1">
<div class="backdrop" role="presentation"></div>
<div class="content">
<button class="close-button" title="閉じる" value="閉じる">×</button>
<h2 tabindex="-1">
35巻限定版
</h2>
<div>
<div>
<span class="price">¥1,728</span><span class="price-notice">(税込・送料無料)</span>
</div>
<input type="hidden" name="goodsNo" value="030304210000">
<input name="cnt_030304210000" type="hidden" value="1">
<button>今すぐ予約する</button>
</form>
<div>
<p class="delivery-date">
<time datetime="03-22">3月22日</time>ごろお届け
</p>
</div>
</div>
</div>
</div>
</body>
</html>
独習
ソース
インスペクター
参考リンク